<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="梅子">
    <title></title>
    <style>
        body {
            margin: 0;
        }
        
        .nav {
            width: 100%;
            background-color: #10C55B;
        }
        
        .nav-ul {
            width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }
        
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .header{
            width: 100%;
        }
        .left-ul li,.right-ul li{
               float: left;
        }
        .left-ul a,.right-ul a{
            display: inline-block;
            width: 100px;
            height: 40px;
            text-align: center;
            text-decoration: none;
            color: #aaa;
            line-height: 40px;
        }
        .left-ul .current{
            width: 80px;
            height: 40px;
            text-align: center;
            background-color: #01923D;
        }
        .left-ul a:hover, .current1:hover{
            background-color: #01923D;
        }
        
        .sousuokuang {
            width: 1200px;
            margin: 50px auto;
            color: #aaa;
        }
        
        .kuang {
            display: inline-block;
            width: 650px;
            height: 50px;
            line-height: 40px;
            border: 1px solid #aaa;
            position: relative;
            top: 20px;
            left: 40px;
            border-radius: 7px;
        }
        
        .text1 {
            position: relative;
            top: -20px;
        }
        
        .zuanshi {
            display: inline-block;
            background-image: url(common.png);
            background-size: 240px 650px;
            background-position: -125px -390px;
            width: 25px;
            height: 25px;
        }
        
        .text {
            width: 500px;
            height: 40px;
            border-color: transparent;
        }
        
        .sousuo {
            width: 83px;
            height: 50px;
            background-color: #10C55B;
            border-bottom-right-radius: 8px;
            border-top-right-radius: 8px;
            border-color: #10C55B;
            border-right: 1px solid #10C55B;
        }
        
        .sousuokuang a {
            text-decoration: none;
            color: black;
        }
        
        .green a {
            color: #10C55B;
            margin: 0 5px;
        }
        
        .right {
            margin: 0;
            margin-top: -15px;
            font-size: 10px;
            margin-left: 200px;
        }
        
        main {
            width: 100%;
            height: 300px;
            position: relative;
        }
        .box{
            width: 1200px;  
            margin: 0 auto;
        }
        
        main img {
            width: 100%;
            height: 300px;
            margin: 0 auto;
        }
        
        .box li {
            display: none;
        }
        
        .box .current {
            display: block;
        }
        
        .title {
            font-size: 25px;
        }
        
        .zhuti {
            font-size: 15px;
            color: gray;
        }
        
        footer {
            width: 1200px;
            margin: 0 auto;
        }
        
        .picture,
        .photo {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
        }
        
        .picture img {
            width: 280px;
            height: 250px;
        }
        
        .photo img {
            width: 280px;
            height: 350px;
        }
        
        .haibao {
            margin-top: 30px;
        }
        
        .lastfooter {
            width: 1200px;
            margin: 10px auto;
            padding: 20px 0;
            border-bottom: 1px solid gray;
            display: flex;
            justify-content: space-between;
        }
        
        .lastfooter ul li:nth-child(1) {
            font-weight: bold;
            margin: 20px 0;
            font-size: 15px;
            color: black;
        }
        
        .lastfooter li {
            font-size: 13px;
            padding: 5px;
            color: gray;
        }
        
        .big li {
            font-size: 18px;
        }
        
        .service {
            width: 1200px;
            margin: 20px auto;
            color: gray;
            display: flex;
            justify-content: space-between;
        }
        
        .left-service {
            width: 400px;
            display: flex;
            justify-content: space-between;
            font-size: 15px;
        }
        .parent{
            overflow: hidden;
        }
        
        .small {
            width: 650px;
            font-size: 11px;
        }
        
        .clickQQ {
            width: 120px;
            height: 40px;
            background-color: #10C55B;
            color: white;
            text-align: right;
            letter-spacing: 2px;
            border: 0;
            border-radius: 10px;
            font-size: 15px;
        }
        
        .sousuo1 {
            display: inline-block;
            background-image: url(common.png);
            background-size: 240px 650px;
            background-position: -65px -460px;
            position: relative;
            left: 600px;
            top: -55px;
            width: 25px;
            height: 25px;
        }
        
        .xing {
            display: inline-block;
            background-image: url(common.png);
            background-size: 320px 650px;
            background-position: -120px -425px;
            width: 50px;
            height: 30px;
        }
        
        .huo {
            display: inline-block;
            background-image: url(common.png);
            background-size: 400px 750px;
            background-position: -155px -240px;
            width: 35px;
            height: 30px;
        }
        
        .weibo {
            display: inline-block;
            background-image: url(common.png);
            background-size: 450px 550px;
            background-position: -118px -180px;
            width: 50px;
            height: 30px;
        }
        
        .weixin {
            display: inline-block;
            background-image: url(common.png);
            background-size: 450px 550px;
            background-position: -65px -180px;
            width: 50px;
            height: 30px;
        }
        
        .qq {
            display: inline-block;
            background-image: url(common.png);
            background-size: 350px 500px;
            background-position: 0px -130px;
            position: relative;
            left: -120px;
            top: 10px;
            width: 40px;
            height: 33px;
        }
        
        .parent {
            position: relative;
        }
        
        .dingzhu {
            display: inline-block;
            background-image: url(common.png);
            background-size: 300px 400px;
            background-position: 0 0;
            position: absolute;
            left: 0px;
            width: 80px;
            height: 30px;
        }
        
        .indicator {
            width: 100%;
            height: 20px;
            position: absolute;
            left: 0;
            bottom: 40px;
            display: flex;
            justify-content: center;
        }
        
        .indicator .active {
            background-color: #01923D;
        }
        
        .indicator li {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #aaa;
            line-height: 20px;
            margin: 0 5px;
            cursor: pointer;
        }
        
        .img-click span {
            width: 30px;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            text-align: center;
            color: white;
            position: absolute;
            background-color: rgba(0, 0, 0, 0.1);
            top: calc(50% - 40px);
            display: none;
            cursor: pointer;
        }
        
        .img-click span:hover {
            background-color: #38f;
        }
        
        .img-click .prev {
            left: 0;
        }
        
        .img-click .next {
            right: 0;
        }
        
        .firstparent {
            position: relative;
            overflow: hidden;
        }
        
        #overlay {
            width: 280px;
            height: 250px;
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            
            
        }
        
        .firstparent p {
            width: 200px;
            height: 100px;
            margin: 60px auto;
            border-top: 1px solid black;
            border-bottom: 1px solid black;
            color: white;
            text-align: center;
            position: absolute;
            left: 50px;
            top: 250px;
            /*display: none;*/
             transition: all 0.2s;
        }
        
        .cenginfo {
            display: inline-block;
            height: 50px;
            line-height: 50px;
            font-weight: bold;
            font-size: 20px;
        }
        
        .ceng {
            width: 280px;
            height: 360px;
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            left: 0;
            bottom: 360px;
            display: none;
            transition: all 0.1s;
        }
        
        .jiantou {
            display: inline-block;
            background-image: url(common.png);
            background-position: -3px -110px;
            position: absolute;
            right: 70px;
            width: 54px;
            height: 54px;
        }
        
        .yellow {
            display: inline-block;
            background-image: url(common.png);
            background-position: -57px -110px;
            position: absolute;
            right: 10px;
            width: 54px;
            height: 54px;
        }
        
        .number {
            position: absolute;
            right: 25px;
            top: 30px;
            color: white;
        }
        
        .phone {
            display: inline-block;
            background-image: url(common.png);
            background-size: 350px 500px;
            background-position: -95px -135px;
            width: 40px;
            height: 25px;
        }
        
        .youxiang {
            display: inline-block;
            background-image: url(common.png);
            background-size: 350px 500px;
            background-position: -50px -130px;    
            width: 40px;
            height: 25px;
        }
        .login{
            width: 60px;
            height: 30px;
            background-color: #01923D;
            border-radius: 10px;
          border: 0;
        }
        .header1{
            width: 100%;
            background-color: white;
            z-index: 100;
        }
        .sousuokuang2{
            width: 1200px;
            margin: 0 auto;
            display: flex;
            height: 80px;
             color: #aaa;
             margin-top: 10px;
            display: none;
            justify-content: space-between;
        }
        .fixedheader {
            width: 800px;
        }
         .fixedheader li{
              float: left;
         }
        
        .fixedheader2{
            width: 300px;
            position: relative;
            top: 10px;
            padding-left: 40px;
            display: flex;
        }
        .right-ul .small {
            color: black;
            position: relative;
            left:-20px;
        }
        .sousuokuang2 img{
            width: 120px;
            height: 60px;
        }
        .sousuokuang2 a{
            text-decoration: none;
        }
        .input2{
            width: 500px;
            height: 50px;
            line-height: 50px;
            position: relative;
            top: 10px;
            border: 1px solid #aaa;
            border-radius: 10px;
        }
        .fixtext{
            width: 220px;
            height: 25px;
            border-color: transparent;
            border-left: 1px solid #aaa;
        }

        .all{
            display: inline-block;
            width: 100px;
            text-align: center;
            height: 70px;
            line-height: 70px;
        }
        .fixbutton{
              position: absolute;
              right: 0;
        }
        .fixedheader2 a{
            color: #aaa;
        }
        .free{
            position: relative;
            top:10px;
        }
        .fixedheader2 li{
            margin: 8px;
        }
        .login1{
            background-color:#10C55B;
        }
        .left-ul-first{
            width: 60px;
            height: 45px;
            background-color: #01923D;
            text-align: center;
        }
        .left-ul-second:hover{
            width: 80px;
            height: 45px;
            margin: 0;
            background-color: #01923D;
            text-align: center;
        }
        .clear{
            clear:both;
        }
       
    </style>
</head>

<body>
    <nav class="nav">
        <div class="nav-ul">
            <ul class="left-ul">
                <li class="current"><a href="#">首页</a></li>
                <li><a href="#">所有分类<span>&#8744;</span></a></li>
                <li><a href="#">设计创意</a></li>
                <li><a href="#">办公创意</a></li>
                <li><a href="#">●●●●●</a></li>
                <div class="clear"></div>
            </ul>
            <ul class="right-ul">
                <li class="current1"><a href="#"><span class="zuanshi"></span>VIP中心</a></li>
                <li>
                    <a href="#"><input type="button" class="login" value="请登录"></a>
                </li>
                <li><a href="#" class="small">免费注册</a></li>
                <div class="clear"></div>
            </ul>
        </div>
    </nav>
    <header>
        <div class="sousuokuang">
            <img src="1.PNG" alt="">
            <span class="kuang">
         <span class=text1>
         <a href="#" class="top">全站&#8744;</a> |
         <input type="text" class="text" placeholder="800万免费设计素材任意下载">
         </span>
            <input type="button" class="sousuo">
            <span class="sousuo1"></span>
            </span>
            <p class="right"><span><a href="#">热门搜索:</a></span>
                <span class="green"><a href="#">七夕</a></span>
                <span><a href="#">详情页</a></span>
                <span class="green"><a href="#">icon</a></span>
                <span><a href="#">主图</a></span>
                <span><a href="#">秋季</a></span>
                <span class="green"><a href="#">PPT模板</a></span>
                <span><a href="#">EXCEL模版</a></span>
                <span><a href="#">首页</a></span>
                <span><a href="#">个人简历</a></span>
                <span class="green"><a href="#">装饰画</a></span></p>
        </div>
    </header>
    <div class="header1">
          <div class="sousuokuang2">
            <ul class="fixedheader">
                <li><img src="1.PNG" alt=""></li>
                <li><span class="all">所有分类&#8744;</span></li>
                <li class="input2"><a href="#" class="top">全站&#8744;</a> 
         <input type="text" class="fixtext" placeholder="800万免费设计素材任意下载">
         <input type="button" class="sousuo fixbutton"></li>
          
            </ul>
            <ul class="fixedheader2">
                 <li><a href="#"><span class="zuanshi"></span>VIP中心</a></li>
                <li>
                    <a href="#"><input type="button" class="login login1" value="请登录"></a>
                </li>
                <li class="free"><a href="#" class="small">免费注册</a></li>
            </ul>
         
        </div>
    </div>
    <main>
        <ul class="box">
            <li class="current">
                <a href="#"><img src="banner01.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="banner02.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="banner03.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="banner04.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="banner05.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="banner06.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="banner07.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="banner08.jpg" alt=""></a>
            </li>
        </ul>
        <ul class="indicator">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="img-click">
            <span class="prev">&lt;</span>
            <span class="next">&gt;</span>
        </div>
    </main>
    <footer>
        <span class="xing"></span> <span class="title">精选专题</span>&#x3000;&#x3000;<span class="zhuti">100万建党素材，PPT汇报模版无限下载，每天仅需0.18元立享VIP特权</span>
        <div class="picture">
            <section class="firstparent"><img src="jxzt01.jpg" alt="">
                <div id='overlay'>
                </div>
                 <p><span class="cenginfo">和啤酒有关的</span><br><span>啤酒是如何拯救世界的</span></p>
            </section>
            <section class="firstparent"><img src="jxzt02.jpg" alt="">
                <div id='overlay'>
                </div>
                 <p><span class="cenginfo">爱的元素背景</span><br><span>七夕到，让爱在土中发芽</span></p>
            </section>
            <section class="firstparent"><img src="jxzt03.jpg" alt="">
                <div id='overlay'>
                </div>
                 <p><span class="cenginfo">鲜花背景精选</span><br><span>为你的设计锦上添花</span></p>
            </section>
            <section class="firstparent"><img src="jxzt04.jpg" alt="">
                <div id='overlay'>
                </div>
                 <p><span class="cenginfo">枫叶元素背景精选</span><br><span>一叶而知秋</span></p>
            </section>
        </div>

        <section class="haibao"><span class="huo"></span> <span class="title">商用海报</span>&#x3000;&#x3000;<span class="zhuti">招聘海报&#x3000;&#x3000;配图海报&#x3000;&#x3000;企业文化&#x3000;&#x3000;促销海报&#x3000;&#x3000;原创插画&#x3000;&#x3000;</span></section>
        <div class="photo">
            <section class="parent"><img src="syhb01.jpg" alt=""><span class="dingzhu"></span>
               
                 
                  <div class='ceng'>
                        <span class="jiantou"></span><span class='yellow'></span>
                 <p class="number">120&#x3000;&#x3000;&nbsp;93</p>
                </div>
                
            </section>
            <section class="parent"><img src="syhb02.jpg" alt=""><span class="dingzhu"></span>
                <div class='ceng'><span class="jiantou"></span><span class='yellow'></span>
                    <p class="number">95&#x3000;&#x3000;&nbsp;95</p>
                </div>
            </section>
            <section class="parent"><img src="syhb03.jpg" alt=""><span class="dingzhu"></span>
                <div class='ceng'><span class="jiantou"></span><span class='yellow'></span>
                    <p class="number">100&#x3000;&#x3000;&nbsp;53</p>
                </div>
            </section>
            <section class="parent"><img src="syhb04.jpg" alt=""><span class="dingzhu"></span>
                <div class='ceng'><span class="jiantou"></span><span class='yellow'></span>
                    <p class="number">160&#x3000;&#x3000;&nbsp;82</p>
                </div>
            </section>
        </div>
    </footer>
    <div class="lastfooter">
        <ul>
            <li>常见问题</li>
            <li>成为特邀设计师</li>
            <li>成为贡献贡献者</li>
            <li>注册</li>
            <li>帐号/密码</li>
            <li>充值/售后</li>
            <li>版权投诉</li>
        </ul>
        <ul>
            <li>关于图网</li>
            <li>关于我们</li>
            <li>媒体报道</li>
            <li>假如我们</li>
            <li>心系千图</li>
            <li>每日更新</li>
        </ul>
        <ul>
            <li>产品服务</li>
            <li>官方博客</li>
            <li>帮助中心</li>
            <li>前途导航</li>
        </ul>
        <ul>
            <li>友情链接</li>
            <li>我图网</li>
            <li>千库网</li>
            <li>摄图网</li>
            <li>包图网</li>
            <li>视达网</li>
            <li>更多>></li>
        </ul>
        <ul class="big">
            <li>
                <h2>客服咨询
                    <h2>
            </li>
            <li><span class="phone"></span>400-998-7011<span class="clock">(9:00-18:00)</span></li>
            <li><span class="youxiang"></span>feedback@58pic.com</li>
            <li><input type="button" class='clickQQ' value="点我交谈"><span class="qq"></span></li>
        </ul>

    </div>
    <div class="service">
        <ul class="left-service">
            <li><span class="weibo"></span></li>
            <li><span class="weixin"></span></li>
            <li>注册声明</li>
            <li>版权声明</li>
            <li>售后服务</li>
        </ul>
        <ul class="small">
            <li>
                注册声明版权声明售后服务 Copyright ©2013-2017 千图网 沪ICP备10011451号-6<span class="jinghui"></span>上海工商 安全实名验证信用网站</li>

        </ul>
    </div>



</body>

</html>
<script>

    window.onload = function () {
        var main=document.querySelector('main');
        var boxlis = document.querySelectorAll('.box li');
        var current = document.querySelector('.current')
        var indicatorlis = document.querySelectorAll('.indicator li');
        var index = 0;
        //上一张
        function prevImg() {
            index = index == 0 ? boxlis.length - 1 : index - 1;
            showImg();
        }
        //下一张
        function nextImg() {
            index = index == boxlis.length - 1 ? 0 : index + 1;
            showImg();
        }
        var bgColorArr = ['#060606','#feff0f','#fdf100','#2c9bff','#89dce3','#fef8b3','#110204','#f4cad8']

        //图片展示
        function showImg() {
            for (var i = 0; i < boxlis.length; i++) {
                boxlis[i].className = '';
                indicatorlis[i].className = '';
            }
            boxlis[index].className = 'current';
            indicatorlis[index].className = 'active';
            main.style.backgroundColor=bgColorArr[index];

        }
        //自动切换图片
        var timer = setInterval(nextImg, 1000)

        //图片跟随指示灯
        for (var i = 0; i < indicatorlis.length; i++) {
            indicatorlis[i].index = i;
            indicatorlis[i].onmouseover = function () {
                clearInterval(timer);
                timer = null;
                index = this.index;
                showImg()
            }
            indicatorlis[i].onmouseout = function () {
                if (timer != null) {
                    return;
                }
                timer = setInterval(nextImg, 1000);
            }
        }
        var prev = document.querySelector('.prev')
        var next = document.querySelector('.next')
        var main = document.querySelector('main')
        main.onmouseover = function () {
            clearInterval(timer);
            timer = null;
            prev.style.display = 'block';
            next.style.display = 'block';
        }
        main.onmouseout = function () {
            if (timer != null) {
                return;
            }
            timer = setInterval(nextImg, 1000);
            prev.style.display = 'none';
            next.style.display = 'none';
        }
        prev.onclick = function () {
            prevImg();
        }
        next.onclick = function () {
            nextImg();
        }
    }

    //遮罩层
    var firstparent = document.querySelector('.firstparent');
    var firstparents = document.querySelectorAll('.firstparent');
    var overlays = document.querySelectorAll('#overlay');
    var ps=document.querySelectorAll('.firstparent p')
    for (var i = 0; i < firstparents.length; i++) {
        firstparents[i].index = i;
        firstparents[i].onmouseover = function (ev) {
            overlays[this.index].style.display = 'block';
             overlays[this.index].style.top = '0';
             ps[this.index].style.top='0';

        }
        firstparents[i].onmouseout = function (ev) {
             overlays[this.index].style.display = 'none';
             ps[this.index].style.top='260px';
        }
    }
    //遮罩层2
    var parent = document.querySelector('.parent');
    var parents = document.querySelectorAll('.parent');
    var cengs = document.querySelectorAll('.ceng');
    for (var i = 0; i < parents.length; i++) {
        parents[i].index = i;
        parents[i].onmouseover = function (ev) {
            cengs[this.index].style.bottom = '0';
             cengs[this.index].style.display= 'block';
        }
        parents[i].onmouseout = function (ev) {
            cengs[this.index].style.bottom = '360px';
        }
    }
    //下拉框
     var body=document.querySelector('body');
    var header1=document.querySelector('.header1');
    var sousuokuang=document.querySelector('.sousuokuang');
    var sousuokuang2=document.querySelector('.sousuokuang2');
     window.onscroll=function(){
          var scrollTop = document.scrollingElement.scrollTop;
        if(body.scrollTop>140){
            header1.style.position='fixed';
            header1.style.top='0';
            sousuokuang2.style.display='block';
        }else{
             sousuokuang2.style.display='none';
            header1.style.position='static';
        } 
     }

</script>